<template>
  <div>
    <el-container style="height: 100%; border: 1px solid #eee">
      <el-aside width="150px">
        <el-tree :data="carList" node-key="value" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
      </el-aside>
      <el-container>
        <el-main>
          <TopFilter :list="topFilterList" :cols="3" @filterChange="changeHandle"></TopFilter>

          <FilterTable
            ref="table"
            :columns="columns"
            :fetchapi="fetchApi"
            :params="fetchParams"
            :datakey="'records'"
            :onRowSelectChange="selectChangeHandle"
            :onColumnsChange="columns => (this.columns = columns)"
          >
          </FilterTable>
          <div
            :style="{
              position: 'absolute',
              left: 0,
              bottom: 0,
              right: 0,
              zIndex: 9,
              borderTop: '1px solid #e9e9e9',
              padding: '10px 20px',
              background: '#fff',
              textAlign: 'right'}"
          >
            <el-button @click="closeDrawer(1)">取 消</el-button>
            <el-button @click="closeDrawer(2)" type="primary" :disabled="isDisabled">确 定</el-button>
        </div>


          <!-- <FormPanel ref="from" :list="formList" :data="dealerInfo" @formChange="changeHandle" :isSubmitBtn="false" :collapse="false" :labelWidth="190"></FormPanel> -->
        </el-main>
      </el-container>
    </el-container>

  </div>
</template>
<script>
import moment from 'moment';
import { queryCarListSideC,getProductBrandTree,listColor,queryAllOption,queryAllPackage } from '@/api/dealerSale/salesPlan/MonthPlanReport';
export default {
  data() {
    return {
      topFilterList: this.createdFrom(),
      columns: this.createdTable(),
      fetchApi: queryCarListSideC,
      // fetchParams: {
      //   dealerCode: this.dealerData.dealerCode
      // },
      fetchParams: { 
        templateStatus: 60231002, 
        templateYearAndMonth: moment().format('YYYY-MM'),
        isDealer:1 
      },
      saveData: [],
      isDisabled: true,
      carList: [],
      defaultProps: {
        children: 'child',
        label: 'label'
      },
      dealerInfo:{},
      addressDTO:[],
      accountTypeList:[]
    };
  },
  props: ['dealerData'],
  // mixins: [dictionary],
  created() {
    this.getvehicleList();
    this.getListColor();
    this.getAllOption();
    this.getAllPackage();
  },
  methods: {
    handleNodeClick(val){
      console.log("value================>"+val.type,val.value)
    },
    //获取装配
    async getAllOption(){
      const res = await queryAllOption();
      if (res.resultCode === 200) {
        res.data.map(x => {
          this.topFilterList.find(item => item.fieldName === 'optionId').itemList.push({ text: x.optionName, value: x.optionId });
        });
      }
    },
    //获取配置
    async getAllPackage(){
      const res = await queryAllPackage();
      if (res.resultCode === 200) {
        res.data.map(x => {
          this.topFilterList.find(item => item.fieldName === 'packageId').itemList.push({ text: x.configName, value: x.packageId });
        });
      }
    },
    //获取颜色
    async getListColor(){
      const res = await listColor();
      if (res.resultCode === 200) {
        let a= res.data;
        a.map(x => {
          this.topFilterList.find(item => item.fieldName === 'trimColorId').itemList.push({ text: x.colorName, value: x.colorId });
        });
        this.topFilterList[4].itemList=this.topFilterList.find(item => item.fieldName === 'trimColorId').itemList;
      }
    },
    //获取树形数据
    async getvehicleList() {
      console.log(this.dealerData,'传入值');
      let res = await getProductBrandTree();
      this.carList = res.data;
    },
    changeHandle(val) {
      this.fetchParams = Object.assign({}, this.fetchParams, val);
    },
    closeDrawer(type) {
      if (1 == type) {
        this.$emit('close');
        return;
      }
      this.$emit('close', this.saveData);
    },
    selectChangeHandle(rows) {
      if (rows.length > 0) {
        this.saveData = rows;
        this.isDisabled = false;
        return;
      }
      this.isDisabled = true;
    },
    createdFrom() {
      return [
        {
          type: 'INPUT',
          label: '物料编码',
          fieldName: 'materialCode',
          placeholder: '请输入',
        },
        {
          type: 'SELECT',
          label: '配置',
          fieldName: 'packageId',
          placeholder: '请选择',
          itemList: [],
        },
        {
          type: 'SELECT',
          label: '选装',
          fieldName: 'optionId',
          placeholder: '请选择',
          itemList: [],
        },
        {
          type: 'SELECT',
          label: '内饰',
          fieldName: 'trimColorId',
          placeholder: '请选择',
          itemList: [],
        },
        {
          type: 'SELECT',
          label: '外饰',
          fieldName: 'colorId',
          placeholder: '请选择',
          itemList: [],
        },
      ];
    },
    createdTable() {
      return [
        {
          title: '序号',
          dataIndex: 'index',
          width: 80,
          sorter: true,
          render: (props) => {
            return <span>{props.row.index + 1}</span>;
          },
        },
        {
          title: '物料编码',
          dataIndex: 'productCode',
          sorter: true,
          filter: true,
          filterType: 'input',
        },
        {
          title: '物料描述',
          dataIndex: 'productName',
          sorter: true,
          filter: true,
          filterType: 'input',
        },

        {
          title: '车型',
          dataIndex: 'modelName',
          sorter: true,
          filter: true,
          filterType: 'input',
        },
        {
          title: '车系',
          dataIndex: 'seriesName',
          sorter: true,
          filter: true,
          filterType: 'input',
        },
        {
          title: '配置',
          dataIndex: 'configName',
          sorter: true,
          filter: true,
          filterType: 'input',
        },
        {
          title: '选装',
          dataIndex: 'optionName',
          align: 'center',
          sorter: true,
          filter: true,
          filterType: 'input',
        },
        {
          title: '内饰',
          dataIndex: 'trimColor',
          sorter: true,
          filter: true,
          filterType: 'input',
        },
        {
          title: '外饰',
          dataIndex: 'colorName',
          sorter: true,
          filter: true,
          filterType: 'input',
        }
      ];
    }
  }
};
</script>